<template>
  <el-card class="pb-4 mb-4">
    <div class="flex items-start justify-start">
      <div class="flex-1">
        <h2 class="mb-2 text-lg text-color1">{{ $t("用户数量") }}</h2>
        <div>
          <p class="text-lg">
            {{ userOverview.user_count }}
          </p>
        </div>
      </div>
      <div class="flex-1">
        <h2 class="mb-2 text-lg text-color1">
          {{ $t("用户接收总数量") }}({{ userOverview.coin_name }})
        </h2>
        <div>
          <p class="text-lg">
            {{ userOverview.user_total_receive || 0 }}
          </p>
        </div>
      </div>
      <div class="flex-1">
        <h2 class="mb-2 text-lg text-color1">
          {{ $t("用户发送总数量") }}({{ userOverview.coin_name }})
        </h2>
        <div>
          <p class="text-lg">
            {{ userOverview.user_total_send || 0 }}
          </p>
        </div>
      </div>
    </div>
  </el-card>
  <el-card>
    <el-row class="flex items-center justify-start mb-4" :gutter="20">
      <el-col :span="22">
        <el-input
          v-model="kw"
          :placeholder="$t('用户ID、用户账号搜索')"
          @change="orderSearch"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="2" :xl="2">
        <el-button class="my-2" type="primary" @click="orderSearch">
          {{ $t("查询") }}
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" v-loading="loading">
      <el-table-column :label="$t('用户ID')" align="center" prop="uid" />
      <el-table-column
        :label="$t('用户账号')"
        align="center"
        prop="account_name"
      />
      <el-table-column prop="available" :label="$t('可用数量')" align="center">
      </el-table-column>
      <el-table-column prop="freeze" :label="$t('冻结数量')" align="center">
      </el-table-column>
      <el-table-column
        prop="receive_amount"
        :label="$t('接收数量')"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="send_amount"
        :label="$t('发送数量')"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="loan" :label="$t('转入数量')" align="center">
      </el-table-column>
      <el-table-column
        :label="$t('操作')"
        align="center"
        fixed="right"
        width="220"
      >
        <template #default="scope">
          <el-button round size="small" @click="handleDetail(scope.row)">
            {{ $t("查看") }}
          </el-button>
          <el-button round size="small" @click="handleTransferIn(scope.row)">
            {{ $t("转入") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-center mt-5">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageable.total"
        v-model::page-size="pageable.pageSize"
        v-model::current-page="pageable.pageNum"
        :page-sizes="[5, 10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <TransferIn
    :show="isShowTransfer"
    :currentData="currentData"
    @close="
      (flag) => {
        isShowTransfer = false;
        if (flag) {
          getTbaleData();
        }
      }
    "
  />
</template>
<script setup>
import { ref, reactive } from "vue";
import { getUserListApi } from "@/api/account/index";
import { useI18n } from "vue-i18n";
import TransferIn from "./transferIn.vue";
const { t } = useI18n();
const loading = ref(false);
const props = defineProps({
  userOverview: {
    type: Object,
    default: () => {},
  },
});
const kw = ref("");

const orderSearch = () => {
  getTbaleData();
};

const emits = defineEmits(["showDetail"]);
// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
// 表格数据
const tableData = ref([]);
// 参数
const param = () => {
  return {
    page: pageable.pageNum,
    pagesize: pageable.pageSize,
    kw: kw.value,
  };
};
// 页码
const handleCurrentChange = (number) => {
  pageable.pageNum = number;
  getTbaleData();
};
// 条数
const handleSizeChange = (number) => {
  pageable.pageSize = number;
  getTbaleData();
};
// 获取表格数据
const getTbaleData = async () => {
  try {
    loading.value = true;
    console.log(param(), "param()");
    // 获取数据
    const res = await getUserListApi(param());
    loading.value = false;
    tableData.value = res.list;
    pageable.total = res.page.total_count;
  } catch (error) {
    loading.value = false;
  }
};
getTbaleData();
// 查看
const handleDetail = ({ ...row }) => {
  emits("showDetail", { ...row });
};

const isShowTransfer = ref(false);
const currentData = ref({});
const handleTransferIn = ({ ...row }) => {
  currentData.value = { ...row };
  isShowTransfer.value = true;
};
</script>
